<template>
  <el-upload
    class="upload-demo"
    drag
    :auto-upload="false"
    v-model="FileList"
    :limit="1"
    :http-request="(file: any) => uploadFile(file)"
    :on-remove="handleRemove"
    :on-exceed="handleExceed"
    :on-change="handleChange"
  >
    <template #trigger>
      <el-icon class="el-icon--upload"><upload-filled /></el-icon>
      <div class="el-upload__text">
        拖拽或者
        <em>点击上传</em>
      </div>
    </template>

    <!-- <template #file="{ file }">
          <img class="el-upload-list__item-thumbnail" :src="file.url" alt="" />
        </template> -->

    <el-button class="ml-3" style="margin-top: 10px" type="success" @click="submitUpload">开始上传</el-button>
    <el-button class="ml-3" style="margin-top: 10px" type="danger" @click="cancelUpload">取消上传</el-button>
    <template #tip>
      <div class="el-upload__tip">jpg/png 文件最大不超过 5M</div>
    </template>
  </el-upload>
</template>

<script lang="ts" setup>
import { ref } from 'vue';
import { UploadFilled } from '@element-plus/icons-vue';
import type { UploadInstance } from 'element-plus';
import sliceFileUpload from '@/utils/shardUpload.ts';

const uploadRef = ref<UploadInstance>();

let fileList = ref([]);
const uploadFile = (fileInfo: any) => {
  let { file } = fileInfo;
  console.log('上传文件', file, fileInfo);
  sliceFileUpload(file);
};
// 开始上传
const submitUpload = () => {
  sliceFileUpload(fileList.value[0]);
};
// 取消上传
const cancelUpload = () => {};

const handleRemove = (val: any) => {
  console.log('文件列表移除文件时的钩子', val);
};
const handleChange = (val: any) => {
  console.log('文件状态改变时的钩子', val);
  // console.log('文件状态改变时的钩子', val.raw);
  fileList.value.push(val.raw);
};
const handleExceed = (val: any) => {
  console.log('当超出限制时执行的函数钩子', val);
};
</script>

<style lang="scss" scoped></style>
